<!-- 订单页 -->
<template>
	<scroll-view class="content">
		<!-- 头部标题部分开始 -->
		<view class="header">
			<text
				style="position: absolute;bottom: 0;left: 30rpx;font-size: 30px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">订单</text>
		</view>
		<!-- 头部标题部分结束 -->
		<!-- 中间选项卡部分开始 -->
		<view class="tab">
			<text :class="tabunm===1?'Ordertab':'Ordertab1'"  @click="tabunm=1">旅游订单</text>
			<text :class="tabunm===2?'Ordertab':'Ordertab1'"  @click="tabunm=2">拼团订单</text>
			<text :class="tabunm===3?'Ordertab':'Ordertab1'"  @click="tabunm=3">商城订单</text>
		</view>
		<!-- 中间选项卡部分结束 -->
		<!-- 下方订单部分开始 -->
		<!-- 旅游订单显示 -->
		<view v-show="tabunm===1">
		<view v-for="(item,index) in play" :key="index">
			<!-- 订单盒子 -->
			<view class="order">
				<!-- 订单的上部分 -->
				<view class="order-top">
					<text>订单编号：{{item.Order}}</text>
					<text :style="{color:item.state==='待出行'?'#1684fc':item.state==='待确认'?'#e2e1e2':'red'}">{{item.state}}</text>
				</view>
				<!-- 订单下部分 -->
				<view class="order-bottom">
					<!-- 订单图片 -->
					<image :src="item.src" mode="aspectFill" style="width: 180rpx;height: 180rpx;border-radius: 20rpx;margin: auto 0;"></image>
					<!-- 订单数据盒子 -->
					<view class="order-bottom-box">
						<text style="font-size: 13px;">{{item.name}}</text>
						<text style="font-size: 12px;color: gray; ">{{item.tex}}</text>
						<text style="font-size: 12px;color: gray; ">{{item.time}}</text>
						<view style="display: flex;justify-content: space-between;">
							<text style="font-size: 12px;color: gray; ">{{item.address}}</text>
							<text style="font-size: 13px;color: red;">{{item.price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		</view>
		<!-- 拼团订单显示 -->
		<view v-show="tabunm===2">
			<view v-for="(item,index) in play" :key="index">
				<!-- 订单盒子 -->
				<view class="order">
					<!-- 订单的上部分 -->
					<view class="order-top">
						<text>订单编号：{{item.Order}}</text>
						<text :style="{color:item.state==='待出行'?'#1684fc':item.state==='待确认'?'#e2e1e2':'red'}">{{item.state}}</text>
					</view>
					<!-- 订单下部分 -->
					<view class="order-bottom">
						<!-- 订单图片 -->
						<image :src="item.src" mode="aspectFill" style="width: 180rpx;height: 180rpx;border-radius: 20rpx;margin: auto 0;"></image>
						<!-- 订单数据盒子 -->
						<view class="order-bottom-box">
							<text style="font-size: 13px;">{{item.name}}</text>
							<text style="font-size: 12px;color: gray; ">{{item.tex}}</text>
							<text style="font-size: 12px;color: gray; ">{{item.time}}</text>
							<view style="display: flex;justify-content: space-between;">
								<text style="font-size: 12px;color: gray; ">{{item.address}}</text>
								<text style="font-size: 13px;color: red;">{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商城订单显示 -->
		<view v-show="tabunm===3">
			<view v-for="(item,index) in play" :key="index">
				<!-- 订单盒子 -->
				<view class="order">
					<!-- 订单的上部分 -->
					<view class="order-top">
						<text>订单编号：{{item.Order}}</text>
						<text :style="{color:item.state==='待出行'?'#1684fc':item.state==='待确认'?'#e2e1e2':'red'}">{{item.state}}</text>
					</view>
					<!-- 订单下部分 -->
					<view class="order-bottom">
						<!-- 订单图片 -->
						<image :src="item.src" mode="aspectFill" style="width: 180rpx;height: 180rpx;border-radius: 20rpx;margin: auto 0;"></image>
						<!-- 订单数据盒子 -->
						<view class="order-bottom-box">
							<text style="font-size: 13px;">{{item.name}}</text>
							<text style="font-size: 12px;color: gray; ">{{item.tex}}</text>
							<text style="font-size: 12px;color: gray; ">{{item.time}}</text>
							<view style="display: flex;justify-content: space-between;">
								<text style="font-size: 12px;color: gray; ">{{item.address}}</text>
								<text style="font-size: 13px;color: red;">{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 下方订单部分结束 -->
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				tabunm: 1,//控制选项卡的
				// 游玩数据
				play:[{
					Order:'y16220856487389',//订单编号
					state:'待出行',//状态
					src:'https://www.hanpokou.com/wp-content/uploads/2021/11/df62eb6a42a5e328ca94592a4b3a1fb8.jpg',//图片
					name:'滕王阁',//名字
					tex:'游客通用票x1',//类型
					time:'2025-5-1 15.01.50',//时间
					address:'江西省南昌滕王阁',//地址
					price:'￥60.00',//价格
					path:''//跳转详情页
				},{
					Order:'y16220856487229',//订单编号
					state:'待评价',//状态
					src:'https://www.hanpokou.com/wp-content/uploads/2021/11/e0327eaa17b6d0b5d4fd9ed15410a140.jpg',//图片
					name:'百花洲',//名字
					tex:'游客通用票x1',//类型
					time:'2025-5-1 18.01.50',//时间
					address:'江西省南昌百花洲',//地址
					price:'￥88.00',//价格
					path:''//跳转详情页
				},{
					Order:'y162208564333439',//订单编号
					state:'待确认',//状态
					src:'https://www.hanpokou.com/wp-content/uploads/2021/11/faaae6ade8c52cf041060c3a6e7b42fc.jpg',//图片
					name:'安义古村',//名字
					tex:'游客通用票x1',//类型
					time:'2025-6-1 18.01.50',//时间
					address:'江西省南昌安义古村',//地址
					price:'￥20.00',//价格
					path:''//跳转详情页
				}]
			}
		},
		methods: {
		
		}
	}
</script>

<style scoped>
	.content {
		height: 100vh;
		background: linear-gradient(-90deg, #b9d7fa, #d5f4f3);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 头部标题部分 */
	.header {
		width: 100%;
		height: 12vh;
		position: relative;
	}

	/* 中间选项卡部分开始 */
	.tab {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	/* 选中样式 */
	.Ordertab {
		width: 120rpx;
		text-align: center;
		border-radius: 25rpx;
		margin: 0 5rpx;
		font-size: 12px;
		color: #5195eb;
		border-style: solid;
		border-width: 1px;
		border-color: #5195eb;
	}

	/* 未选中样式 */
	.Ordertab1 {
		width: 120rpx;
		text-align: center;
		border-radius: 25rpx;
		margin: 0 5rpx;
		font-size: 12px;
		color: gray;
		border-style: solid;
		border-width: 1px;
		border-color: gray;
	}

	/* 中间选项卡部分结束 */
	/* 下方订单样式开始 */
.order{
	box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
	width: 90%;
	height: 340rpx;
	margin: 10rpx auto;
	border-radius: 20rpx;
	background-color: #fff;
}
/* 订单顶部部分 */
.order-top{
	height: 90rpx;
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
	line-height: 90rpx;
}
/* 订单底部部分 */
.order-bottom{
	width: 90%;
	display: flex;
	flex-direction: row;
	height: 250rpx;
	margin: 0 auto;
}
.order-bottom-box{
	width: 400rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 180rpx;
	margin: auto;
}
	/* 下方订单样式结束 */
</style>